<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :headers="headers"
      :data="extraParams"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="true"
      drag
      accept=".csv"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip">只能识别.csv文件</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'step1',
  data() {
    return {
      uploadUrl: `${process.env.VUE_APP_BASE_API}/systemTool/api/upload`, // 改为你的上传接口
      headers: {
        Authorization: this.$store.getters.token // 可根据需要替换获取 token 的方式
      },
      extraParams: {
        bizType: '5.0salarySettlement'
      }
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.$message.success('上传成功!')
      this.$emit('next', response.data)
    },
    handleError(err, file, fileList) {
      console.error('上传失败:', err)
      this.$message.error('上传失败!')
    }
  }
}
</script>

<style scoped>
.upload-demo {
  width: 400px;
}

::v-deep .el-upload-dragger{
  width: calc(100vw - 255px);
  height: calc(100vh - 195px);
}
</style>
